window.addEventListener('load', function () {
    var goods = document.querySelector('#iphone');
    var mask = document.querySelector('.mask')
    var big = this.document.querySelector('.big');
    goods.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })

    goods.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    goods.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var maskxmax = goods.offsetWidth - mask.offsetWidth;
        var maskymax = goods.offsetHeight - mask.offsetHeight;
        var maskx = x - mask.offsetWidth / 2;
        var masky = y - mask.offsetHeight / 2;
        if (maskx <= 0) {
            maskx = 0
        } else if
            (maskx >= maskxmax) {
            maskx = maskxmax;
        }
        if (masky <= 0) {
            masky = 0
        } else if
            (masky >= maskymax) {
            masky = maskymax;
        }

        mask.style.left = maskx + 'px';
        mask.style.top = masky + 'px';
        var bigimg = document.querySelector('.bigimg');
        var bigmax = bigimg.offsetWidth - big.offsetWidth;
        var imagx = bigmax * maskx / maskxmax;
        var imagy = bigmax * masky / maskymax;
        bigimg.style.top = - imagy + 'px';
        bigimg.style.left = -imagx + 'px';
    })

})



